import React,{ Component } from "react";
import {View, Text, StyleSheet,TouchableNativeFeedback} from "react-native";
import { List, ListItem } from 'react-native-elements'
import MyCustomElement from "../common/MyCustomElement";
const list = [
    {
        name: '欢迎新成员',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: 'Vice President',
        icon:1,
    },
    {
        name: '支部活动',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman',
        icon:3,
    },
    {
        name: '其他事项',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman',
        icon:3,
    },
    {
        name: '记忆与思念',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
    },
    {
        name: '意见建议',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
    },
];
export default class HomePage extends Component {
    render(){
        const { navigation } = this.props;
        return (
            <View style={ styles.conatiner }>
                <List containerStyle={{marginBottom: 20}}>
                    {
                        list.map((l,index,data) => (
                            <TouchableNativeFeedback onPress={()=>{
                                navigation.navigate("Notification",{ title:l.name })
                            }}>
                            <ListItem
                                roundAvatar
                                avatar={{uri:l.avatar_url}}
                                key={l.name}
                                title={l.name}
                                badge={{ element: <MyCustomElement icon={l.icon} /> }}
                            />
                            </TouchableNativeFeedback>
                        ))
                    }
                </List>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    conatiner:{
        flex:1,
    }
});